import {Routes, Route, NavLink, Navigate} from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import List from './pages/list';
import News from './pages/list/news';
import Music from './pages/list/music';
import Details from './pages/details';
import NotFound from './pages/404';
import styled from 'styled-components';
import Login from './pages/login';
import ProtectedRouter from './pages/component/ProtectedRouter';



const NavBoxStyle = styled.div`
  a{
    margin:0 10px;
    text-decoration: none;
    &.active{
      color:#f00;
    }
  }
`
const App = () => {
  return (
   <>
    {/* 路由菜单 */}
     <NavBoxStyle>
      <NavLink to='/home'>首页</NavLink>
      <NavLink to='/list'>列表</NavLink>
      <NavLink to='/details'>详情</NavLink>
      <NavLink to='/about'>我的</NavLink>
    </NavBoxStyle>
    <hr />

    {/* 路由匹配到，展示内容区域 */}
    <div className='router-view'>
      <Routes>
        <Route path='/' element={<Navigate to='/home' />}/>
        <Route path='/login' element={<Login />}/>
        <Route path='/home' element={<Home />} />
        <Route path='/list' element={<List />}>
          <Route path='/list' element={<Navigate to='/list/news' />}/>
          <Route path='/list/news' element={<News /> } />
          <Route path='/list/music' element={<Music /> } />
        </Route>
        <Route path='/details' element={<Details />} />
        
          <Route path='/about' element={
            <ProtectedRouter> <About /></ProtectedRouter>
            } />
        <Route path='/*' element={<NotFound />} />
      </Routes>
    </div>
   </>
  );
};

export default App;
